import React, { forwardRef, PureComponent } from 'react'
import { message, Pagination, Spin, Timeline } from 'antd'
import { connect } from '@umijs/max'
import { InputSearch } from '@/components'
import { queryHistoryReq } from '../../../api'
import EmptyImg from './empty.png'
import styles from './index.less'

class OperateRecord extends PureComponent {
  constructor(props) {
    super(props)
    this.state = {
      spreadSta: false,
      pageNum: 1,
      pageSize: 10,
      content: '',
      currentTargetNode: {},
      loading: false,
      result: [],
    }
  }

  // 进入工作流页面，第一次点击工作流程目标，此时页面还未加载
  componentDidMount() {
    this.setState(
      {
        currentTargetNode: this.props?.treeCurrentTargetNode,
      },
      () => {
        this.initData()
      },
    )
  }

  UNSAFE_componentWillUpdate(nextProps) {
    if (nextProps.currentTargetNode !== this.props.currentTargetNode) {
      // eslint-disable-next-line react/no-will-update-set-state
      this.setState(
        {
          currentTargetNode: nextProps.currentTargetNode,
        },
        () => {
          this.initData()
        },
      )
    }
  }

  initData = () => {
    const {
      pageNum, pageSize, content, currentTargetNode,
    } = this.state
    const { id } = currentTargetNode || {}

    const params = {
      nodeId: id,
      pageNum,
      pageSize,
      content,
    }
    if (id) {
      this.setState({ loading: true })
      queryHistoryReq(params).then((res = {}) => {
        const { status, data, msg } = res
        this.setState({ loading: false })
        if (status === 200) {
          this.setState({
            ...data,
          })
        } else {
          message.error(msg || '服务端错误')
        }
      })
    }
  }

  // eslint-disable-next-line react/no-unused-class-component-methods
  toggleOperateRecord = (spreadStaParams = undefined) => {
    if (!this.state.spreadSta) {
      this.initData()
    }
    this.setState((prevState) => ({
      spreadSta: spreadStaParams !== undefined ? spreadStaParams : !prevState.spreadSta,
    }))
  };

  render() {
    const {
      spreadSta, result, pageNum, pageSize, totalElements, loading,
    } = this.state
    return (
      <div className={`${styles.node_detail} ${spreadSta ? styles.spread : ''}`}>
        <div className={styles.node_detail_column}>操作记录</div>
        <div className={styles.container}>
          <InputSearch
            placeholder="请输入用户名或者操作内容进行搜索"
            onChange={(e) => {
              this.setState({
                content: e.target.value,
              })
            }}
            onSearch={() => {
              this.setState({
                pageSize: 10,
                pageNum: 1,
              }, () => {
                this.initData()
              })
            }}
          />
          <Timeline className={styles.time_line}>
            <Spin spinning={loading}>
              {
              result?.map(item => (
                <Timeline.Item key={item?.id}>
                  <div className={styles.time}>{item?.createTime || '-'}</div>
                  <div className={styles.cont}>{item?.username || '-'}：{item?.remark || '-'}</div>
                </Timeline.Item>
              ))
            }
              {
              result?.length <= 0 && (
                <div className={styles.empty_box}>
                  <img className={styles.empty_img} src={EmptyImg} alt="empty" />
                  <p className={styles.note}>暂无数据</p>
                </div>
              )
            }
            </Spin>
          </Timeline>
          {
            (totalElements || null) && (
              <Pagination
                className={styles.pagination}
                size="small"
                current={pageNum}
                pageSize={pageSize}
                onChange={(pageNumParams, pageSizeParams) => {
                  this.setState(
                    {
                      pageNum: pageNumParams,
                      pageSize: pageSizeParams,
                    },
                    this.initData,
                  )
                }}
                total={totalElements}
                // showQuickJumper
              />
            )
          }
        </div>
      </div>
    )
  }
}

class WrappedComponentRef extends PureComponent {
  render() {
    const { forwardedRef, ...rest } = this.props
    return (
      <OperateRecord ref={forwardedRef} {...rest} />
    )
  }
}

const IComponent = connect(({ flowDev }) => ({ ...flowDev }))(WrappedComponentRef)

export default forwardRef((props, ref) => <IComponent {...props} forwardedRef={ref} />)
